<template>
  <el-row class="d-flex flex-column" v-if="$route.path === '/info/org'">
    <el-col :span="24">
      <form class="el-form query-form el-form--label-right el-form--inline">
        <div class="el-form-item el-form-item--medium" v-if="!(admin.mType >= 4)">
          <label for="date" class="el-form-item__label" style="width: 60px;">街道</label>
          <div class="el-form-item__content">
            <el-select
              v-model="query.mZhenid"
              clearable
              placeholder="请选择街道"
              @change="get_villageAtt()"
            >
              <el-option
                v-for="(town, index) in townAtt"
                :key="index"
                :label="town.zName"
                :value="town.zhenId"
              ></el-option>
            </el-select>
          </div>
          <!---->
        </div>
        <div class="el-form-item el-form-item--medium" v-if="!(admin.mType >= 5)">
          <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
          <div class="el-form-item__content">
            <el-select
              v-model="query.mVillageid"
              clearable
              placeholder="请选择村"
              @change="get_groupAtt()"
            >
              <el-option
                v-for="(village, index) in villageAtt"
                :key="index"
                :label="village.vName"
                :value="village.villageId"
              ></el-option>
            </el-select>
          </div>
          <!---->
        </div>
        <div class="el-form-item el-form-item--medium">
          <label for="date" class="el-form-item__label" style="width: 60px;">姓名</label>
          <div class="el-form-item__content">
            <el-input v-model="query.name" clearable placeholder="请输入姓名"></el-input>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium">
          <label for="date" class="el-form-item__label" style="width: 80px;">人员身份</label>
          <div class="el-form-item__content">
            <el-select v-model="query.entity" clearable placeholder="请选择人员身份">
              <el-option
                v-for="item in ['积极分子', '发展对象', '预备党员', '正式党员']"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>
          <!---->
        </div>
        <div class="el-form-item el-form-item--medium ml-6">
          <div class="el-form-item__content">
            <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium ml-10 pl-3" v-if="!(admin.mType == 3)">
          <div class="el-form-item__content">
            <el-button plain icon="el-icon-plus" @click="show_form()">
              <span>添加</span>
            </el-button>
          </div>
          <!---->
        </div>
      </form>
    </el-col>
    <el-col :span="24">
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(225, 225, 225, 0.8)"
        ref="multipleTable"
        :data="items"
        border
        max-height="600"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <template>
          <el-table-column type="selection" width="120" align="center"></el-table-column>
          <el-table-column type="index" width="120" align="center"></el-table-column>
          <el-table-column label="姓名" width="200" align="center" prop="zzfzName"></el-table-column>
          <el-table-column label="性别" width="100" align="center" prop="zzfzSex"></el-table-column>
          <el-table-column label="人员身份" width="200" align="center" prop="zzfzEntity"></el-table-column>
          <el-table-column label="所属村" width="200" align="center" prop="villageName"></el-table-column>
          <el-table-column label="职务" width="140" align="center" prop="zzfzZhiWu"></el-table-column>
          <el-table-column label="就职单位" width="240" align="center" prop="zzfzDanWei"></el-table-column>
          <el-table-column label="编辑" align="center" width="350" fixed="right">
            <template slot-scope="scope" v-if="$route.path === '/info/org'">
              <el-button type="primary" icon="el-icon-tickets" @click="showAll(scope.$index)">详情</el-button>
              <el-button
                v-if="!(admin.mType == 3)"
                type="warning"
                icon="el-icon-edit"
                @click="updata(scope.$index)"
              >编辑</el-button>
              <el-button
                v-if="!(admin.mType == 3)"
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.$index, 'zzfzName')"
              >删除</el-button>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div style="margin-top: 20px">
        <el-row>
          <el-col :span="12">
            <div
              class="grid-content bg-purple d-flex jc-between ai-center"
              v-if="!(admin.mType == 3)"
            >
              <el-button
                type="primary"
                icon="el-icon-delete"
                style="display: block;"
                class="h-1 w-1"
                @click="del_multip('zzfzName')"
              ></el-button>
              <a
                target="_blank"
                href="http://www.huitengit.com/excelbiao/dangyaunfazhan.zip"
                class="ml-10 pl-10"
              >
                <el-button type="text" icon="el-icon-download">模板文件下载</el-button>
              </a>
              <el-upload
                class="upload-demo"
                ref="upload"
                :action="$http.defaults.baseURL + `ImportExcel`"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="success"
                :on-error="error"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                :data="file"
                :auto-upload="false"
                name="ExcelFile"
                :multiple="true"
              >
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button
                  style="margin-left: 10px;"
                  size="small"
                  type="success"
                  @click="submitUpload"
                >上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传excel文件，建议不超过500kb</div>
              </el-upload>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.current_page"
                :page-sizes="pagination.page_sizes"
                :page-size="pagination.page_size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-dialog
      title="新增党员发展内容"
      v-if="$route.path === '/info/org'"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible_create"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="5.625rem"
        class="d-flex flex-column w-10 p-2 pt-0"
      >
        <el-col :span="24">
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-center">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">姓名</label>
              <div class="el-form-item__content">
                <el-input v-model="form.name" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">性别</label>
              <div class="el-form-item__content">
                <el-select v-model="form.sex" clearable placeholder="请选择">
                  <el-option :label="男" value="男"></el-option>
                  <el-option :label="女" value="女"></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">民族</label>
              <div class="el-form-item__content">
                <el-select v-model="form.mingzu" clearable placeholder="请选择">
                  <el-option
                    v-for="(nation, index) in nations"
                    :key="index"
                    :label="nation.nName"
                    :value="nation.nKey"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">镇</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.mZhenid"
                  clearable
                  :disabled="admin.mType >= 4"
                  placeholder="请选择镇"
                  @change="get_villageAtt(true)"
                >
                  <el-option
                    v-for="(town, index) in townAtt_form"
                    :key="index"
                    :label="town.zName"
                    :value="town.zhenId"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">村</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.villageId"
                  clearable
                  :disabled="admin.mType == 5"
                  placeholder="请选择村"
                  @change="get_groupAtt(true)"
                >
                  <el-option
                    v-for="(village, index) in villageAtt_form"
                    :key="index"
                    :label="village.vName"
                    :value="village.villageId"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">组</label>
              <div class="el-form-item__content">
                <el-select v-model="form.zuId" clearable placeholder="请选择组">
                  <el-option
                    v-for="(group, index) in groupAtt_form"
                    :key="index"
                    :label="group.zName"
                    :value="group.zKey"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" clearable style="width: 90px;">文化程度</label>
              <div class="el-form-item__content">
                <el-select v-model="form.wenhua" placeholder="请选择">
                  <el-option
                    v-for="item in ['小学', '初级中学', '高级中学', '专科', '本科', '硕士研究生', '博士研究生']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">积极分子</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.jjfzTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为积极分子时间"
                ></el-date-picker>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">发展对象</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.fzdxTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为发展对象时间"
                ></el-date-picker>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">人员身份</label>
              <div class="el-form-item__content">
                <el-select v-model="form.entity" clearable placeholder="请选择人员身份">
                  <el-option
                    v-for="item in ['积极分子', '发展对象', '预备党员', '正式党员']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">职务</label>
              <div class="el-form-item__content">
                <el-input v-model="form.zhiwu" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">就职单位</label>
              <div class="el-form-item__content">
                <el-input v-model="form.danwei" clearable></el-input>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">家庭住址</label>
              <div class="el-form-item__content">
                <el-input v-model="form.address" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 90px;">联系方式</label>
              <div class="el-form-item__content">
                <el-input v-model="form.phone" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">身份证号</label>
              <div class="el-form-item__content">
                <el-input v-model="form.shengfengzhenghao" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">预备党员</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.ybdyTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为预备党员时间"
                ></el-date-picker>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">正式党员</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.zsdyTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为正式党员时间"
                ></el-date-picker>
              </div>
            </div>
          </el-col>
        </el-col>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel_c">取 消</el-button>
        <el-button type="primary" @click="reset_c">重 置</el-button>
        <el-button type="primary" @click="create">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="党员发展内容编辑"
      v-if="$route.path === '/info/org'"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible_edmit"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="5.625rem"
        class="d-flex flex-column w-10 p-2 pt-0"
      >
        <el-col :span="24">
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-center">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">姓名</label>
              <div class="el-form-item__content">
                <el-input v-model="form.name" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">性别</label>
              <div class="el-form-item__content">
                <el-select v-model="form.sex" clearable placeholder="请选择">
                  <el-option :label="男" value="男"></el-option>
                  <el-option :label="女" value="女"></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">民族</label>
              <div class="el-form-item__content">
                <el-select v-model="form.mingzu" clearable placeholder="请选择">
                  <el-option
                    v-for="(nation, index) in nations"
                    :key="index"
                    :label="nation.nName"
                    :value="nation.nKey"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">镇</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.mZhenid"
                  clearable
                  :disabled="admin.mType >= 4"
                  placeholder="请选择镇"
                  @change="get_villageAtt(true)"
                >
                  <el-option
                    v-for="(town, index) in townAtt_form"
                    :key="index"
                    :label="town.zName"
                    :value="town.zhenId"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">村</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.villageId"
                  clearable
                  :disabled="admin.mType == 5"
                  placeholder="请选择村"
                  @change="get_groupAtt(true)"
                >
                  <el-option
                    v-for="(village, index) in villageAtt_form"
                    :key="index"
                    :label="village.vName"
                    :value="village.villageId"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">组</label>
              <div class="el-form-item__content">
                <el-select v-model="form.zuId" clearable placeholder="请选择组">
                  <el-option
                    v-for="(group, index) in groupAtt_form"
                    :key="index"
                    :label="group.zName"
                    :value="group.zKey"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" clearable style="width: 90px;">文化程度</label>
              <div class="el-form-item__content">
                <el-select v-model="form.wenhua" placeholder="请选择">
                  <el-option
                    v-for="item in ['小学', '初级中学', '高级中学', '专科', '本科', '硕士研究生', '博士研究生']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">积极分子</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.jjfzTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为积极分子时间"
                ></el-date-picker>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">发展对象</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.fzdxTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为发展对象时间"
                ></el-date-picker>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">人员身份</label>
              <div class="el-form-item__content">
                <el-select v-model="form.entity" clearable placeholder="请选择人员身份">
                  <el-option
                    v-for="item in ['积极分子', '发展对象', '预备党员', '正式党员']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">职务</label>
              <div class="el-form-item__content">
                <el-input v-model="form.zhiwu" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">就职单位</label>
              <div class="el-form-item__content">
                <el-input v-model="form.danwei" clearable></el-input>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">家庭住址</label>
              <div class="el-form-item__content">
                <el-input v-model="form.address" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 90px;">联系方式</label>
              <div class="el-form-item__content">
                <el-input v-model="form.phone" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">身份证号</label>
              <div class="el-form-item__content">
                <el-input v-model="form.shengfengzhenghao" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">预备党员</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.ybdyTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为预备党员时间"
                ></el-date-picker>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">正式党员</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.zsdyTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为正式党员时间"
                ></el-date-picker>
              </div>
            </div>
          </el-col>
        </el-col>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel_u">取 消</el-button>
        <el-button type="primary" @click="reset_u">重 置</el-button>
        <el-button type="primary" @click="updata_save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="党员发展内容详情"
      v-if="$route.path === '/info/org'"
      width="40%"
      :show-close="true"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible_all"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="5.625rem"
        class="d-flex flex-column w-10 p-2 pt-0"
      >
        <el-col :span="24">
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-center">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">姓名</label>
              <div class="el-form-item__content">
                <el-input v-model="form.name" readonly="true" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">性别</label>
              <div class="el-form-item__content">
                <el-select v-model="form.sex" disabled clearable placeholder="请选择">
                  <el-option :label="男" value="男"></el-option>
                  <el-option :label="女" value="女"></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">民族</label>
              <div class="el-form-item__content">
                <el-select v-model="form.mingzu" disabled clearable placeholder="请选择">
                  <el-option
                    v-for="(nation, index) in nations"
                    :key="index"
                    :label="nation.nName"
                    :value="nation.nKey"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">镇</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.mZhenid"
                  clearable
                  disabled
                  placeholder="请选择镇"
                  @change="get_villageAtt(true)"
                >
                  <el-option
                    v-for="(town, index) in townAtt_form"
                    :key="index"
                    :label="town.zName"
                    :value="town.zhenId"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">村</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.villageId"
                  clearable
                  disabled
                  placeholder="请选择村"
                  @change="get_groupAtt(true)"
                >
                  <el-option
                    v-for="(village, index) in villageAtt_form"
                    :key="index"
                    :label="village.vName"
                    :value="village.villageId"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">组</label>
              <div class="el-form-item__content">
                <el-select v-model="form.zuId" clearable disabled placeholder="请选择组">
                  <el-option
                    v-for="(group, index) in groupAtt_form"
                    :key="index"
                    :label="group.zName"
                    :value="group.zKey"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" clearable style="width: 90px;">文化程度</label>
              <div class="el-form-item__content">
                <el-select v-model="form.wenhua" disabled placeholder="请选择">
                  <el-option
                    v-for="item in ['小学', '初级中学', '高级中学', '专科', '本科', '硕士研究生', '博士研究生']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">积极分子</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.jjfzTime"
                  type="date"
                  disabled
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为积极分子时间"
                ></el-date-picker>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">发展对象</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.fzdxTime"
                  type="date"
                  disabled
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为发展对象时间"
                ></el-date-picker>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">人员身份</label>
              <div class="el-form-item__content">
                <el-select v-model="form.entity" disabled clearable placeholder="请选择人员身份">
                  <el-option
                    v-for="item in ['积极分子', '发展对象', '预备党员', '正式党员']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
              <!---->
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">职务</label>
              <div class="el-form-item__content">
                <el-input v-model="form.zhiwu" disabled clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">就职单位</label>
              <div class="el-form-item__content">
                <el-input v-model="form.danwei" readonly="true" clearable></el-input>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">家庭住址</label>
              <div class="el-form-item__content">
                <el-input v-model="form.address" readonly="true" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 90px;">联系方式</label>
              <div class="el-form-item__content">
                <el-input v-model="form.phone" readonly="true" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">身份证号</label>
              <div class="el-form-item__content">
                <el-input v-model="form.shengfengzhenghao" readonly="true" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">预备党员</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.ybdyTime"
                  type="date"
                  disabled
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为预备党员时间"
                ></el-date-picker>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">正式党员</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.zsdyTime"
                  type="date"
                  disabled
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="成为正式党员时间"
                ></el-date-picker>
              </div>
            </div>
          </el-col>
        </el-col>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      model: {},
      admin: {},
      obj: {},
      items: [
        //表格内容
      ],
      init_items: [
        //原始表格渲染数据
      ],
      pagination: {
        current_page: 1,
        page_sizes: [20, 30, 50, 100],
        page_size: 20,
        total: 0,
        page_length: 0
      },
      loading: true,
      formLabelWidth: "100px",
      form: {
        //弹出框内容
      },
      query: {
        //检索对象
        // entity: ""
      },
      //序列id
      index: 0,
      //对应村
      villageAtt: [],
      villageAtt_form: [],
      //对应镇
      townAtt: [],
      townAtt_form: [],
      //对应组
      groupAtt: [],
      groupAtt_form: [],
      //多删数组
      delAtt: [],
      multipleSelection: [],
      jobAtt: [],
      nations: [],
      //文件上传
      fileList: [],
      file: {
        entity: "1"
      },
      //删除的对象
      del_obj: {},
      delMany: {},
      //模态框
      dialogFormVisible_create: false,
      dialogFormVisible_edmit: false,
      dialogFormVisible_all: false
    };
  },
  methods: {
    setQuery() {
      if (this.admin.mType == 4) {
        this.query.mZhenid = this.admin.mZhenid;
        this.get_villageAtt();
      }
      if (this.admin.mType == 5) {
        this.query.mZhenid = this.admin.mZhenid;
        this.query.mVillageid = this.admin.mVillageid;
      }
    },
    setObj(obj) {
      obj.adminId = this.admin.mType;
      obj.quId = this.query.quId || 1349;
      obj.entity = this.query.entity;
      obj.zId = this.query.mZhenid;
      obj.vId = this.query.mVillageid;
      obj.startPage = this.pagination.current_page;
      obj.pageSize = this.pagination.page_size;
    },
    async get_townAtt(flag) {
      let res;
      if (flag) {
        res = await this.$http.get(`/caiwu/findzhenByRegionId/1349`);
        this.townAtt_form = res.data.data;
      } else {
        res = await this.$http.get(`/caiwu/findzhenByRegionId/1349`);
        this.townAtt = res.data.data;
      }
    },
    async get_villageAtt(flag) {
      let res;
      if (flag) {
        res = await this.$http.get(
          `/caiwu/findzhenByZhenId/${this.form.mZhenid}`
        );
        this.villageAtt_form = res.data.data;
      } else {
        res = await this.$http.get(
          `/caiwu/findzhenByZhenId/${this.query.mZhenid}`
        );
        this.villageAtt = res.data.data;
      }
    },
    async get_groupAtt(flag) {
      this.get_jobAtt();
      let res;
      if (flag) {
        res = await this.$http.get(`/caiwu/findZu/${this.form.villageId}`);
        this.groupAtt_form = res.data.data;
      } else {
        res = await this.$http.get(`/caiwu/findZu/${this.query.mVillageid}`);
        this.groupAtt = res.data.data;
      }
    },
    async get_vill_to_town() {
      const res = await this.$http.post(
        `/h/inSelect`,
        this.Qs.stringify({ villageId: this.form.villageId })
      );
      if (res.status == 200) {
        this.form.mZhenid = res.data.data[0].zhenId;
        console.log(res.data.data[0].zhenId);
        console.log(this.form.mZhenid);
      }
    },
    async get_jobAtt() {
      const res = await this.$http.get(
        `/villagecadres/queryJobNameBuVillageId/${this.form.villageId}`
      );
      this.jobAtt = res.data.list;
    },
    async get_nations() {
      const res = await this.$http.get("v/NationList");
      this.nations = res.data.nations;
    },
    //请求数据
    async fetch(obj) {
      this.setObj(obj);
      const res = await this.$http.post("/Zuzifazhan", this.Qs.stringify(obj));
      if (typeof res.data.data === "object") {
        Array.isArray(res.data.data) &&
          res.data.data.forEach(item => {
            if (item.time) {
              item.time = item.time.slice(0, 10);
            }
            if (item.qkbgTime) {
              item.qkbgTime = item.qkbgTime.slice(0, 10);
            }
            this.changeDifferData(item);
          });
        this.init_items = res.data;
        this.items = res.data.data;
      } else {
        this.items = [];
      }
      this.up_pagination();
      if (
        this.$util.getCookie("current_page") !==
        String(this.pagination.current_page)
      ) {
        this.handleCurrentChange(this.$util.getCookie("current_page"));
      }
      if (res.status == 200) {
        this.loading = false;
      }
    },
    handleSelectionChange(val) {
      let att = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        let { zzfzId } = item;
        att.push(zzfzId);
      });
      this.delAtt = att;
    },
    setIndex() {
      this.$basicMes.forEach((item, index) => {
        if (item.name == this.query.town) {
          this.villageAtt = this.$basicMes[index].village;
        }
      });
    },
    get_delObj() {
      let { managerId } = this.admin;
      this.del_obj = { managerId };
    },
    get_delMany() {
      this.delMany = this.delAtt;
    },
    del(index, name) {
      this.get_delObj();
      this.form = this.items[index];
      this.$confirm(
        `此操作将永久删除 ${this.items[index][name]}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }
      )
        .then(async index => {
          const res = await this.$http.delete(`/Delete`, {
            params: {
              managerId: this.admin.managerId,
              entity: this.query.entity,
              id: this.form.zzfzId
            },
            paramsSerializer: params => {
              return this.Qs.stringify(params, { indices: false });
            }
          });
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.fetch(this.obj);
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    changeDifferData(item) {
      let obj = { ...item };
      let obj1 = {
        id: "zzfzId",
        name: "zzfzName",
        mingzu: "zzfzNative",
        jjfzTime: "jjfzTime",
        fzdxTime: "fzdxTime",
        ybdyTime: "ybdyTime",
        zsdyTime: "zsdyTime",
        wenhua: "zzfzWenHua",
        villageId: "zzfzVillage",
        zuId: "zzfzZu",
        address: "zzfzAddress",
        entity: "zzfzEntity",
        danwei: "zzfzDanWei",
        zhiwu: "zzfzZhiWu",
        sex: "zzfzSex",
        phone: "zzfzPhone",
        shengfengzhenghao: "zzfzShenfenzheng",
        zzfzXuHao: "zzfzXuHao",
        villageName: "villageName",
        zuName: "zuName",
        beiYong2: "beiYong2",
        beiYong1: "beiYong1",
        beiYong3: "beiYong3"
      };
      let _obj = {};
      for (const key in obj1) {
        _obj[key] = item[obj1[key]];
        if (obj1[key] == "zzfzNative") {
          _obj[key] = parseInt(item[obj1[key]]);
        } else if (key == "zhiwu" && item[obj1["zhiwu"]]) {
          _obj[key] = item[obj1[key]].split(",");
        } else {
          _obj[key] = item[obj1[key]];
        }
      }
      console.log(_obj);
      Object.assign(item, _obj);
      console.log(item["zhiwu"]);

      console.log(item);
    },
    updata(index, flag) {
      this.get_nations();
      this.form = this.items[index];
      // this.changeDifferData();
      this.get_vill_to_town();
      this.get_townAtt(true);
      this.get_groupAtt(true);
      if (flag) {
        this.dialogFormVisible_all = true;
      } else {
        this.dialogFormVisible_edmit = true;

         
      }
      setTimeout(() => {
        this.get_villageAtt(true);
      }, 200);
    },
    async del_multip(name) {
      if (!this.delAtt.length) {
        return;
      }
      this.get_delMany();
      let str = "";
      this.multipleSelection.forEach(item => {
        str += item[name] + "\t\t";
      });

      this.$confirm(`此操作将永久删除 ${str}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async index => {
          const res = await this.$http.delete(`/DeleteDuoTiao`, {
            params: {
              managerId: this.admin.managerId,
              entity: this.query.entity,
              id: this.delAtt.toString()
            },
            paramsSerializer: params => {
              return this.Qs.stringify(params, { indices: false });
            }
          });
          console.log(".....////");
          console.log(res);
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.fetch(this.obj);
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    success(res) {
      console.log(res);
      let message = res.message.split(",");
      if (res.status == "200") {
        message.forEach(_message => {
          this.$message({
            type: "success",
            message: _message
          });
        });
      } else {
        this.$message({
          type: "error",
          message: "上传失败"
        });
        setTimeout((message) => {
          message.forEach(_message => {
            this.$message({
              type: "error",
              message: _message
            });
          });
        }, 2000,message);
      }
    },
    error(err) {
      // alert('haha')
      // err.message.forEach(message => {
      //   this.$message({
      //     type: "error",
      //     message
      //   });
      // });
    },
    //文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {},
    handlePreview(file) {},
    //分页功能
    up_pagination() {
      this.pagination.page_length = Math.ceil(
        this.init_items.count / this.pagination.current_page
      );
      this.pagination.total = this.init_items.count;
    },
    handleSizeChange(val) {
      this.pagination.page_size = val;
      this.pagination.current_page = 1;
    },
    async handleCurrentChange(val) {
      this.pagination.current_page = val;
      this.$util.setCookie("current_page", this.pagination.current_page);
      this.to_query();
    },
    //query
    to_query() {
      let obj = {};
      for (let item in this.query) {
        if (this.query[item]) {
          obj[item] = this.query[item];
        }
      }
      this.fetch(obj);
    },

    //create
    reset_c() {
      this.$confirm("确定重置新增数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        this.$message({
          type: "success",
          message: "已重置"
        });
        this.form = {};
      });
    },
    show_init() {
      switch (this.admin.mType) {
        case 2:
          this.get_townAtt(true);
          break;
        case 3:
          break;
        case 4:
          this.get_townAtt(true);
          this.form.mZhenid = this.admin.mZhenid;
          this.get_villageAtt(true);
          break;
        case 5:
          this.get_townAtt(true);
          this.form.mZhenid = this.admin.mZhenid;
          this.get_villageAtt(true);
          this.form.villageId = this.admin.mVillageid;
          this.get_groupAtt(true);
          break;
      }
    },
    clearForm() {
      for (const key in this.form) {
        if (this.form[key]) {
          this.form[key] = "";
        }
      }
    },
    show_form() {
      this.clearForm();
      this.show_init();
      this.get_nations();
      this.dialogFormVisible_create = true;
    },
    set_form() {
      let _obj = {};
      _obj.shengfen = this.form.entity;
      _obj.managerId = this.admin.managerId;
      for (let key in this.form) {
        if (this.form[key]) {
          _obj[key] = this.form[key];
        }
      }
      _obj["zhiwu"] = this.form["zhiwu"].toString();
      return _obj;
    },
    cancel_c() {
      this.$confirm("取消添加将不会保存该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已取消！"
          });
          this.form = {};
          this.dialogFormVisible_create = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    success_c(res, file, files) {},
    async create() {
      this.set_form(this.form);
      const res = await this.$http.post(
        `/Insert`,
        this.Qs.stringify(this.set_form(this.form))
      );
      if (res.data.status == "success") {
        this.$message({
          type: "success",
          message: `新增成功`
        });
        this.fetch(this.obj);
        this.dialogFormVisible_create = false;
      }
    },

    reset_u() {
      this.$confirm("确定重置编辑数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        this.$message({
          type: "success",
          message: "已重置"
        });
        for (let item in this.form) {
          if (item !== "_id") {
            this.form[item] = "";
          }
        }
      });
    },
    cancel_u() {
      this.$confirm("取消添加将不会保存该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已取消！"
          });
          setTimeout(() => {
            this.dialogFormVisible_edmit = false;
          }, 200);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    modify_form() {
      let obj1 = {
        id: "zzfzId",
        name: "zzfzName",
        mingzu: "nation",
        jjfzTime: "jjfzTime",
        fzdxTime: "fzdxTime",
        ybdyTime: "ybdyTime",
        zsdyTime: "zsdyTime",
        wenhua: "zzfzWenHua",
        villageId: "zzfzVillage",
        zuId: "zzfzZu",
        address: "zzfzAddress",
        entity: "zzfzEntity",
        danwei: "zzfzDanWei",
        zhiwu: "zzfzZhiWu",
        sex: "zzfzSex",
        phone: "zzfzPhone",
        shengfengzhenghao: "zzfzShenfenzheng",
        beiYong2: "beiYong2",
        beiYong1: "beiYong1",
        beiYong3: "beiYong3"
      };
      let obj = {};
      for (const key in obj1) {
        if (this.form.hasOwnProperty(key)) {
          obj[key] = JSON.parse(JSON.stringify(this.form[key]));
        }
      }
      obj["managerId"] = this.admin.managerId;
      console.log(obj);
      obj["zhiwu"] = obj["zhiwu"] && obj["zhiwu"].toString();
      return obj;
    },
    async updata_save() {
      this.form.managerId = this.admin.managerId;
      const res = await this.$http.put(
        "/Update",
        this.Qs.stringify(this.modify_form())
      );
      if (res.status == 200) {
        this.dialogFormVisible_edmit = false;
        this.fetch(this.obj);
        this.$message({
          message: "编辑成功",
          type: "success"
        });
        this.fetch(this.obj);
      } else {
        this.$message({
          message: "编辑失败",
          type: "error"
        });
      }
    },
    cancel() {
      this.dialogFormVisible_all = false;
    },
    showAll(index) {
      this.updata(index, true);
    }
  },
  created() {
    this.admin = this.$util.handleLocalStorage("get", "admin");
    this.file.managerId = this.$util.handleLocalStorage(
      "get",
      "admin"
    ).managerId;
    this.pagination.current_page = 1;
    this.$util.setCookie("current_page", this.pagination.current_page);
    this.get_townAtt();
    this.setQuery();
    this.fetch(this.obj);
  }
};
</script>

<style lang="scss" scoped>
</style>

